<template>
  <div class="billTablesContent">
      <!-- 顶部内容,批量确认 -->
      <div class="tabHeader">
          <span>发票总金额:<small>123456</small>元</span>
          <Button type="primary" @click="batchInfo">批量确认开票信息</Button>
        </div>

        <!-- 表标题 -->
        <div class="tabTit">
          <table>
            <th v-for="(item, index) in tabTit" :key="index" v-text="item.name"></th>
          </table>
        </div>

      <!-- 展开内容 -->
      <Collapse v-model="item.toggle" v-for="(item, index) in businessData" :key="index" v-show="item.dataTit">
        <div class="toggleContent">
          <h3>
              <CheckboxGroup v-model="checkboxId">
                  <Checkbox :label="item.id">
                    <span :title="item.dataTit">{{item.dataTit}}</span>
                    <span class="toggleSpan" v-text="item.toggle.length?'收起':'展开'"></span>
                  </Checkbox>
              </CheckboxGroup>
              
              <p @click="edit(item)" v-if="!item.isEidt">修改</p>
              <p v-else>
                <span @click="save(item)">保存</span>
                <span @click="cancel(item)">取消</span>
              </p>
          </h3>
          <p class="nextP">
            <span v-if="item.dataName">
              账户名称:<small>{{item.dataName}}</small>
            </span>
            <span v-if="item.DataNum">账单号:<small>{{item.DataNum}}</small></span>
            <span v-if="item.dataTimeStart">账单日期:<small>{{item.dataTimeStart}} ~ {{item.dataTimeEnd}}</small></span>
            <span v-if="item.dataCount">发票总金额:<small>{{item.dataCount}}</small></span>
          </p>
        </div>
        <Panel name= '1'>
            <!-- 查看 -->
            <table cellspacing="0" slot="content" v-if="!item.isEidt">
                <!-- <tr><th v-for="(title, index) in columns1" :key="index">{{title.title}}</th></tr> -->
                <tr v-for="(busItem, index) in item.businessType" :key="index">
                     <td :rowspan="busItem.count > 1?busItem.count: ''" :class="{hidden: !busItem.count}">
                        {{busItem.invoiceTit}}
                    </td>
                    <td>
                      <div>{{busItem.name}}</div>
                    </td>
                    <td>
                      <div>{{busItem.invoiceType}}</div>
                    </td>
                    <td>
                      <div>{{busItem.invoiceContent}}</div>
                    </td>
                    <td>
                      <div>{{busItem.invoiceMoney}}</div>
                    </td>
                    <td>
                      <div>{{busItem.deductionMoney}}</div>
                    </td>
                    <td>
                      <div>{{busItem.deductionProportion}}</div>
                    </td>
                    <td>
                      <div>{{busItem.billingParty}}</div>
                    </td>
                </tr>
            </table>
            <!-- 编辑 -->
            <table cellspacing="0" slot="content" v-else>
                <!-- <tr><th v-for="(title, index) in columns1" :key="index">{{title.title}}</th></tr> -->
                <tr v-for="(busItem, index) in item.businessType" :key="index">
                     <td>
                        <Select v-model="busItem.invoiceTit">
                          <Option :value="busItem.invoiceTit">{{ busItem.invoiceTit }}</Option>
                            <!-- <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option> -->
                        </Select>
                    </td>
                    <td>
                      <div>{{busItem.name}}</div>
                    </td>
                    <td>
                        <Select v-model="busItem.invoiceType">
                          <Option :value="busItem.invoiceType">{{ busItem.invoiceType }}</Option>
                        </Select>
                    </td>
                    <td>
                      <div>{{busItem.invoiceContent}}</div>
                    </td>
                    <td>
                      <div>{{busItem.invoiceMoney}}</div>
                    </td>
                    <td>
                      <div>{{busItem.deductionMoney}}</div>
                    </td>
                    <td>
                      <div>{{busItem.deductionProportion}}</div>
                    </td>
                    <td>
                      <Select v-model="busItem.billingParty">
                        <Option :value="busItem.billingParty">{{ busItem.billingParty }}</Option>
                      </Select>
                    </td>
                </tr>
            </table>
        </Panel>
    </Collapse>
    <!-- 分页 -->
    <div class="page">
      <Page show-elevator show-sizer :page-size="10" :current="pageData.current" :total="pageData.total" @on-change="changePage"/>
    </div>
  </div>
</template>

<script>
import {formatTimeYYYYMMDD, formatMoney} from '../../../../utils'
export default {
  name: "billTables",
  props:['tabTit','businessData','pageData'],
  data() {
    return {
        // 选中的id
        checkboxId:[],
        // 选中的数据
        tabCheckedData:[],
        // 表头数据
        // tabTit:[
        //   {name:'发票抬头(社会信用代码)'},
        //   {name:'业务类型'},
        //   {name:'发票类型'},
        //   {name:'发票内容'},
        //   {name:'发票金额'},
        //   {name:'可抵扣税额'},
        //   {name:'抵扣税率'},
        //   {name:'开票方'}
        // ],
        // 表格数据
        // businessData:[
        //   {
        //     id:1,
        //     // 行标题
        //     dataTit:'浙江华铁应急设备科技股份有限公司',
        //     // 账户名称
        //     dataName:'复兴商户授权账户',
        //     // 账单号
        //     dataNum: '100001',
        //     // 账单日期
        //     dataTimeStart:'2020/08/01',
        //     dataTimeEnd:'2020/10/01',
        //     // 发票总金额
        //     dataCount: '123321',
        //     // 默认展开行
        //     toggle:'1',
        //     // 修改状态
        //     isEidt:false,
        //     businessType:[
        //         {
        //           // 发票抬头
        //           invoiceTit:'上海xxxxxxxxxxxxx信息科技公司（913101156315606610X）',
        //           // 业务类型
        //           name: '国内酒店',
        //           // 发票类型
        //           invoiceType: '电子发票',
        //           // 发票内容
        //           invoiceContent: '经理代理服务,代订住宿费',
        //           // 发票金额
        //           invoiceMoney: '3389.19',
        //           // 抵扣额度
        //           deductionMoney: '20',
        //           // 抵扣税率
        //           deductionProportion: '3',
        //           // 开票方
        //           billingParty:'上海在途科技旅行社',
        //         },
        //         {
        //             // 发票抬头
        //             invoiceTit:'上海xxxxxxxxxxxxx信息科技公司（913101156315606610X）',
        //             // 业务类型
        //             name: '国内酒店111111',
        //             // 发票类型
        //             invoiceType: '电子发票11111111',
        //             // 发票内容
        //             invoiceContent: '经理代理服务,代订住宿费111111',
        //             // 发票金额
        //             invoiceMoney: '3389.19111',
        //             // 抵扣额度
        //             deductionMoney: '201111',
        //             // 抵扣税率
        //             deductionProportion: '31111',
        //             // 开票方
        //             billingParty:'上海在途科技旅行社11111',
        //         },
        //     ]
        // },
        // {
        //     id:2,
        //     // 行标题
        //     dataTit:'浙江华铁应急设备科技股份有限公司1',
        //     // 账户名称
        //     dataName:'复兴商户授权账户',
        //     // 账单号
        //     dataNum: '100001',
        //     // 账单日期
        //     dataTimeStart:'2020/08/01',
        //     dataTimeEnd:'2020/10/01',
        //     // 发票总金额
        //     dataCount: '123321',
        //     toggle:'1',
        //     // 修改状态
        //     isEidt:false,
        //     businessType:[
        //         {
        //           // 发票抬头
        //           invoiceTit:'上海xxxxxxxxxxxxx信息科技公司（913101156315606610X1）',
        //           // 业务类型
        //           name: '国内酒店',
        //           // 发票类型
        //           invoiceType: '电子发票',
        //           // 发票内容
        //           invoiceContent: '经理代理服务,代订住宿费',
        //           // 发票金额
        //           invoiceMoney: '3389.19',
        //           // 抵扣额度
        //           deductionMoney: '20',
        //           // 抵扣税率
        //           deductionProportion: '3',
        //           // 开票方
        //           billingParty:'上海在途科技旅行社',
        //         },
        //         {
        //             // 发票抬头
        //             invoiceTit:'上海xxxxxxxxxxxxx信息科技公司（913101156315606610X）',
        //             // 业务类型
        //             name: '国内酒店111111',
        //             // 发票类型
        //             invoiceType: '电子发票11111111',
        //             // 发票内容
        //             invoiceContent: '经理代理服务,代订住宿费111111',
        //             // 发票金额
        //             invoiceMoney: '3389.19111',
        //             // 抵扣额度
        //             deductionMoney: '201111',
        //             // 抵扣税率
        //             deductionProportion: '31111',
        //             // 开票方
        //             billingParty:'上海在途科技旅行社11111',
        //         },
        //     ]
        // }
        // ],
        // 分页数据
        // pageData:{
        //   current:1,
        //   total:30
        // }
    };
  },
  created(){
    this.initTabRow()
  },
  methods: {
      // 批量确认开票信息
      batchInfo(){
        this.tabCheckedData = []
        this.checkboxId.forEach(id => {
          this.businessData.forEach(item=>{
            if(id == item.id){
              this.tabCheckedData.push(item)
            }
          })
       })
       this.$emit('batchInfo', this.tabCheckedData)
      },
      // 合并相同的行,仅invoiceTit
      getData(list){
        let count = 0
          for (let index in list) {
            if(list[0].invoiceTit==list[index].invoiceTit){
              count ++
            }else{
              list[index].count = 1
            }
          }
          list[0].count = count
          return list;
   },
      // 合并初始化
      initTabRow(){
        if(this.businessData){
          this.businessData.forEach(item=>{
            this.getData(item.businessType)
          })
        }
      },
      // 修改
      edit(item){
        item.isEidt = true
      },
      // 保存
      save(item){
        item.isEidt = false
        this.$emit('save', item)
      },
      // 取消
      cancel(item){
        item.isEidt = false
      },
      // 分页
      changePage(val){
        this.$emit('page', val)
      }
  },
  watch: {

  }
};
</script>

<style lang="scss" scoped>
.billTablesContent {
  .hidden{
    display: none
}
  min-width: 1390px;
  padding: 24px;
  background-color: #fff;
  // 表头
  .tabTit{
    table{
      th{
        height: 40px;
        line-height: 40px;
        font-weight: bold;
        background-color:#E3EFFF;
        border: 0;
      }
    }
  }
  // 顶部总金额
  .tabHeader{
      height: 80px;
      line-height: 80px;
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      span{
        font-weight: bold;
        small{
          color: #1E96FE;
        }
      }
  }
  // toggle百叶窗
  /deep/ .ivu-collapse{
    position: relative;
  }
  // 展开收起箭头
  /deep/ .ivu-collapse-header{
    position: absolute;
    top: 7px;
    left: 270px;
    border-bottom: 0 !important;
    i{
      margin-left: 30px;
      font-size: 20px;
      color: #1E96FE;
    }
  }
  .toggleContent {
    h3{
      margin: 1rem;
      display: flex;
      justify-content: space-between;
      p{
        font-weight: normal;
        color: #1692FE;
        cursor: pointer;
      }
      .toggleSpan{
        margin-left: 10px;
        color: #1692FE;
      }
      // 标题文字
      /deep/ .ivu-checkbox+span{
        width: 225px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        display: inline-grid;
      }
    }
    .nextP {
      margin-bottom: 1rem;
      span{
        margin-left: 1rem;
        small{
          margin-left: 1rem
        }
        &:last-child small{
          color: #1692FE;
          font-weight: bold;
        }
      }
    }
  }
  // 表格数据
  /deep/ .ivu-collapse-content,/deep/ .ivu-collapse-content-box{
    padding: 0;
  }
  table{
    width: 100%;
    // border-top:1px solid #e9eaec;
    // border-left:1px solid #e9eaec;
    table-layout: fixed;
    tr{
      height: 50px;
      color: #495060;
      border-bottom: 1px solid #e9eaec;
      td{
        border-bottom: 1px solid #e9eaec;
        text-align: center;
        &:first-child{
          border-right:1px solid #e9eaec;
        }
      }
      &:last-child td{
        border-bottom: 0;
      }
    }
  }
  // 分页
  .page{
    margin-top: 20px;
    text-align: right;
    width: 100%;
    display: inline-block;
  }
}
</style>
